<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/11/26
  Time: 19:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="js/jQuery.js"></script>
<body>
  <form action="register" method="post" onsubmit="return check()" enctype="multipart/form-data" >
    <input type="text" name="username" id="username" placeholder="用户名" value="${user.username}"> <span>${errors.username}</span><br>
    <div id="usernameError" class="error-message" style="display:none; color:red;">用户名长度必须在6-10位之间。</div>

    <input type="text" name="password" id="password" placeholder="密码" value="${user.password}"><span>${errors.password}</span><br>
    <div id="passwordError" class="error-message" style="display:none; color:red;">密码必须是数字和字母的组合，6-10位，不能包含其他特殊符号。</div>

    <input type="text" placeholder="确认密码" id="confirmPassword" value="${user.password}"><br>
    <div id="confirmPasswordError" class="error-message" style="display:none; color:red;">两次密码不一致，请重新输入！</div>

    <input type="text" name="userAge" id="userAge" placeholder="年龄" value="${user.userAge}"> <span>${errors.userAge}</span><br>
    <div id="userAgeError" class="error-message" style="display:none; color:red;">年龄范围为0到120</div>
    <input type="text" name="birthDay" placeholder="生日" value="<fmt:formatDate value="${user.birthDay}"></fmt:formatDate>"><span>${errors.birthDay}</span> <br>
    <input type="text" name="email" placeholder="邮箱" value="${user.email}"><span>${errors.email}</span><br>
    性别：<input type="radio" value="男" name="userSex">男
         <input type="radio" value="女" name="userSex">女 <br>
    头像: <input type="file" name="avatar" accept="image/*" >
    <input type="submit" value="提交"><br>
    <div>${msg}</div>
  </form>
</body>
<script>
  function check(){
    // 初始化验证状态
    let isValid = true;
    // 获取表单值
    let username = $("#username").val();
    let password = $("#password").val();
    let confirmPassword = $("#confirmPassword").val();
    let userAge = $("#userAge").val();
    console.log(username+password+confirmPassword);
    // 隐藏所有错误信息
    $(".error-message").hide();
    // 1. 检查两次密码是否一致
    if (password !== confirmPassword) {
      $("#confirmPasswordError").show();
      isValid = false;
    }
    // 2. 检查用户名长度
    if (username.length < 6 || username.length > 10) {
      $("#usernameError").show();
      isValid = false;
    }
    // 3. 检查密码格式
    let passwordPattern = /^(?=.*[0-9])(?=.*[a-zA-Z])[0-9a-zA-Z]{6,10}$/;
    if (!passwordPattern.test(password)) {
      $("#passwordError").show();
      isValid = false;
    }
    let userAgePattern = /^[0-9]|[1-9][0-9]|10[0-9]|120$/;
    if (!userAgePattern.test(userAge)) {
      $("#userAgeError").show();
      isValid = false;
    }
    return isValid;
  };
</script>
</html>
